<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false" :safe-area-inset-bottom="false">
		<template #top>	
			<view class="bg">
				<image src="@/static/bg.png" mode="aspectFill"></image>
			</view>
			<!-- tab栏 -->
			<v-tabs v-model="current" field="name" :tabs="tabs" @change="changeTab" height="86rpx" color="#626576"
				activeColor="#F04E2A" lineColor="#F04E2A" fontSize="30rpx"></v-tabs>
		</template>
		<view class="main">
			<view class="item" v-for="i in dataList" :key="i.id">
				<view class="item-img">
					<image :src="i.thumb" mode="aspectFill"></image>
				</view>
				<view class="item-info">
					<view class="item-info-name">
						{{ i.title }}
					</view>
					<view class="item-info-xiaoliang">
						销量:{{ i.virtual_sales }}
					</view>
					<view class="item-info-bottom">
						<view class="item-info-bottom-price">
							￥{{ i.price }}
						</view>
						<view class="item-info-bottom-btn" @click="onWish(i)">
							许愿
						</view>
					</view>
				</view>
			</view>
		</view>
		</z-paging>
		<view class="add">
			<image-box src="../../static/add.png" width="38rpx" height="38rpx"></image-box>
			<text>自定义心愿商品</text>
		</view>
		<add-wish ref="addWishRef"></add-wish>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		computed
	} from "vue";
	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { getHttpApi } from "@/api/base"
	onLoad(async()=>{
		await getClassList()
		await paging.value.reload()
	})
	onMounted(()=>{
	})
	const cate_id = ref(null)
	const current = ref(null)
	const tabs = ref([])
	const paging = ref(null);
	const dataList = ref([])
	const queryList = async (page, limit) => {
		try {
			let res = await getHttpApi({
				route: 'group-buying.goodsList',
				page,
				limit,
				type:"5",
				mid:"4",
				cate_id: cate_id.value
			});
			paging.value.complete(res.data.data);
		} catch (e) {
			paging.value.complete(false);
		}
	}
	const changeTab = (item,index) => {
		cate_id.value = item.id
		paging.value.reload()
	}
	// 获取分类
	const getClassList = async()=> {
		try{
			let res = await getHttpApi({
				route:"group-buying.cateList",
				type:"5",
				mid:"4"
			})
			tabs.value = res.data
			current.value = 0
			cate_id.value = tabs.value[0].id
		}catch(e){
			//TODO handle the exception
		}
	}
	const addWishRef = ref(null)
	const onWish = (item)=>{
		addWishRef.value.open(item.id)
	}
</script>
<style>
	page {
		background-color: #FFF !important;
	}
</style>
<style scoped lang="scss">
	.add{
		position: fixed;
		left: 50%;
		right: 50%;
		bottom: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 294rpx;
		height: 68rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 10rpx 2rpx rgba(255,46,0,0.12);
		border-radius: 200rpx;
		margin: auto -148rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #F04E2A;
		&>text{
			margin-left: 12rpx;
		}
	}
	.bg{
		width: 100%;
		height: 358rpx;
	}
	.main{
		padding: 40rpx 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		margin-bottom: 46rpx;
		&-img{
			width: 168rpx;
			height: 168rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-right: 14rpx;
		}
		&-info{
			flex: 1;
			&-name{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 36rpx;
			}
			&-xiaoliang{
				font-weight: 400;
				font-size: 20rpx;
				color: #958F8F;
				line-height: 48rpx;
			}
			&-bottom{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 12rpx;
				&-price{
					font-weight: 400;
					font-size: 30rpx;
					color: #F04E2A;
					line-height: 28rpx;
				}
				&-btn{
					width: 113rpx;
					height: 50rpx;
					background: #F04E2A;
					border-radius: 200rpx;
					text-align: center;
					line-height: 50rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>